<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="text-align:right;">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
                    <a @click="handleDelete(record.id)">删除</a>
        </span>
         <!-- 分配专家 -->
        <span slot="expertAction" slot-scope="text, record">
            <span style="margin-right:10px;">{{record.zjlist}}</span>
            <a>
                <img @click="handleExpert(record)" style="width:14px;height:14px;cursor:pointer;" src="../../assets/img/xuanze.png" alt="">
            </a>
        </span>
      </a-table>
    </div>
    <cxj-wysd-fzcg-modal ref="modalForm" @ok="modalFormOk"></cxj-wysd-fzcg-modal>
    <!-- 分配专家 -->
    <cxj-wysd-fpzj ref="fpZjForm" :fzid="csfzid" :expertFlag="expertFlag" @addExpert="handleAddExpert"></cxj-wysd-fpzj>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import CxjWysdFzcgModal from './modules/CxjWysdFzZgcgModal'
  import { filterObj } from '@/utils/util';
  import {
    deleteAction,
    getAction
} from "@/api/manage"
import CxjWysdFpzj from './modules/CxjWysdZgFpzj.vue'
import {
    cxjwysdZgFzzjadd
} from "@/api/api"
  export default {
    name: 'CxjWysdFzList',
    // mixins:[JeecgListMixin, mixinDevice],
    components: {
      CxjWysdFzcgModal,
      CxjWysdFpzj
    },
    data () {
      return {
        description: '委员审定分组表管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
        //   {
        //     title:'分组序号',
        //     align:"center",
        //     dataIndex: 'wysdFzXh'
        //   },
          {
            title:'分组编号',
            align:"center",
            dataIndex: 'wysd_fz_bh'
          },
          {
            title:'分组名称',
            align:"center",
            dataIndex: 'wysd_fz_mc'
          },
        //   {
        //     title:'年度',
        //     align:"center",
        //     dataIndex: 'shijian'
        //   },
        //   {
        //     title:'是否有效',
        //     align:"center",
        //     dataIndex: 'isValid'
        //   },
       
          {
            title:'备注',
            align:"center",
            dataIndex: 'bz1'
          },
             {
            title:'分组专家',
            align:"center",
            dataIndex: 'expertAction',
            scopedSlots: { customRender: 'expertAction' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/cxj/cxjWysdFzZgcg/cxjwysd_fzlist",
          delete: "/cxj/cxjWysdFzZgcg/delete",
          deleteBatch: "/cxj/cxjWysdFz/deleteBatch",
          exportXlsUrl: "/cxj/cxjWysdFz/exportXls",
          importExcelUrl: "cxj/cxjWysdFz/importExcel",
        },
        dictOptions:{},
        superFieldList:[],


        /* 分页列表参数开始 */
        queryParam: {},
        dictOptions:{},
        superFieldList:[],
        fileStatus: "",
        selectedRowKeys: [],
        selectionRows: [],
        loading: false,
        isorter: {
            column: 'createTime',
            order: 'desc',
        },
        dataSource: [],
        ipagination: {
            current: 1,
            pageSize: 10,
            pageSizeOptions: ['10', '20', '30'],
            showTotal: (total, range) => {
                return range[0] + "-" + range[1] + " 共" + total + "条"
            },
            showQuickJumper: true,
            showSizeChanger: true,
            total: 0
        },
        /* 分页列表参数结束 */

        
            // 专家弹框
            expertFlag: false,
            csfzid: ''
      }
    },
    created() {
        this.getSuperFieldList();
        this.loadData();
    },
    computed: {
        importExcelUrl: function(){
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        
        // 分配专家
        handleExpert(record){
            this.expertFlag = !this.expertFlag;
            this.csfzid = record.id;
        },
        // 删除分组
        handleDelete(id){
            let that = this;
            this.$confirm({
                title: '确定要删除吗?',
                okText: '确定',
                // okType: 'danger',
                cancelText: '取消',
                onOk() {
                    let formData = {
                        id
                    }
                    deleteAction(that.url.delete, formData).then((res)=>{
                        if(res.success){
                            that.$message.success(res.message);
                            that.$emit('ok');
                            that.loadData();
                        }else{
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                    })
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        },
        // 添加专家
        handleAddExpert(data){
            let formData = new FormData();
            formData.append('fzid', data.fzid);
            formData.append('ids', data.ids);
            // console.log(data.fzid)
            // console.log(data.ids)
            cxjwysdZgFzzjadd(formData).then(res=>{
                console.log(res)
                if (res.code == 200) {
                    this.$message.success(res.message);
                    this.$refs.fpZjForm.waitExpertList();
                    this.$refs.fpZjForm.selectedExpertList();
                    this.$refs.fpZjForm.expertIds = [];
                    this.loadData();
                } else {
                    this.$message.warning(res.message);
                }
                
            })
        },










        /* 获取列表固定格式开始 */
        getQueryField() {
            // TODO  字段权限控制
            var str = "id,";
            this.columns.forEach(function (value) {
                str += "," + value.dataIndex;
            });
            return str;
        },
        // 获取分组项目
        loadData(arg) {
            if (!this.url.list) {
                this.$message.error("请设置url.list属性!")
                return
            }
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            var params = this.getQueryParams();//查询条件
            this.loading = true;
            // 分组id
            // this.queryParam.sbnd = this.sbnd;
            getAction(this.url.list, params).then((res) => {
                if (res.success) {
                    //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                    this.dataSource = res.result.records || res.result;
                    if (res.result.total) {
                        this.ipagination.total = res.result.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                    //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                }
                if (res.code === 510) {
                    this.$message.warning(res.message)
                }
                this.loading = false;
            })
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
        onClearSelected() {
            this.selectedRowKeys = [];
            this.selectionRows = [];
        },
        modalFormOk() {
            // 新增/修改 成功时，重载列表
            this.loadData();
            //清空列表选中
            this.onClearSelected()
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();
        },
        
        getQueryParams() {
            //获取查询条件
            let sqp = {}
            if (this.superQueryParams) {
                sqp['superQueryParams'] = encodeURI(this.superQueryParams)
                sqp['superQueryMatchType'] = this.superQueryMatchType
            }
            this.queryParam.flid = this.flid;
            var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
            param.field = this.getQueryField();
            param.pageNo = this.ipagination.current;
            param.pageSize = this.ipagination.pageSize;
            return filterObj(param);
        },
        handleAdd: function () {
            this.$refs.modalForm.add();
            this.$refs.modalForm.title = "新增";
            this.$refs.modalForm.disableSubmit = false;
        },
        handleEdit: function (record) {
            this.$refs.modalForm.edit(record);
            this.$refs.modalForm.title = "编辑";
            this.$refs.modalForm.disableSubmit = false;
        },
        searchQuery() {
            this.loadData(1);
        },
        searchReset() {
            this.queryParam = {};
            this.flid = "";
            this.loadData(1);
        },
        /* 获取列表固定格式结束 */









        initDictConfig(){
        },
        getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'int',value:'wysdFzXh',text:'分组序号',dictCode:''})
        fieldList.push({type:'string',value:'wysdFzBh',text:'分组编号',dictCode:''})
        fieldList.push({type:'string',value:'wysdFzMc',text:'分组名称',dictCode:''})
        fieldList.push({type:'string',value:'shijian',text:'年度',dictCode:''})
        fieldList.push({type:'string',value:'isValid',text:'是否有效',dictCode:''})
        fieldList.push({type:'string',value:'bz1',text:'备注1',dictCode:''})
        fieldList.push({type:'string',value:'bz2',text:'备注2',dictCode:''})
        this.superFieldList = fieldList
        }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>